<template>
	<div class="nav-bar">
		<div class="left" @click="goback"><slot name="left"><img src="@/assets/images/icon_zuo.png"></slot></div>
		<div class="center"><slot>中间</slot></div>
		<div class="right"><slot name="right">右侧</slot></div>
	</div>
</template>


<script>
	import {useRouter} from 'vue-router';
	export default{
		setup(){
			const router=useRouter()
			const goback=()=>{
				router.go(-1)
			}
			return{
				goback
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-bar{
		
		display:flex;
		background-color: #42b983;;
		height: 46px;
		line-height: 46px;
		color: #fff;
		justify-content: center;
		align-items: center;
		text-align: center;
		position: fixed;
		top:0;
		left: 0;
		right: 0;
		.left,.right{
			width: 60px;
		}
		.left img{
			width: 23px;
			height: 23px;
			vertical-align: middle;
			
		}
		.center{
			flex: 1;
		}
	}
</style>
